<template>
  <div style="position: relative">
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="name"
        label="版本名称"
        name="name"
      >
        <a-input
          v-model:value="formState.name"
          placeholder="请输入版本名称"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="num"
        label="版本号"
        name="num"
      >
        <a-input v-model:value="formState.num" disabled placeholder="请输入版本号" />
      </a-form-item>
    
      <a-form-item
        style="width:100%"
        ref="remark"
        label="版本描述"
        name="remark"
      >
        <a-textarea
          placeholder="请输入版本描述"
          style="width: 100%"
          v-model:value="formState.remark"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="url"
        label="版本地址"
        name="url"
      >
        <a-upload
          v-model:file-list="fileList"
           action="/waste/sysUpgrade/uploadFile"
          @change="beforeUpload"
        >
          <div v-if="fileList.length < 1">
            <a-button class="ant-upload-text" type="primary">上传</a-button>
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as notificationApi from "@/api/notification.js";
import * as dictionariesApi from "@/api/dictionaries.js";
import { message } from "ant-design-vue";


const rules = {
  name: [
    {
      required: true,
      message: "请输入版本名称",
      trigger: "blur",
    },
  ],
  url:[
      {
      required: true,
      message: "请上传版本地址",
      trigger: "blur",
    },
  ],
  num: [
    {
      required: true,
      message: "请输入版本名称",
    },
  ],
};
import * as sysUpgradeApi from "@/api/sysUpgrade.js";
export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      name: "",
      num: null,
      id: "",
      url: "",
      remark: "",
    });
    const fileList = ref([]);
    const beforeUpload = (file) => {
     if(file.file.response){
       formState.num = file.file.response.data.num
      formState.url = file.file.response.data.url
     }
      return false;
    };
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        console.log(fileList.value[0].originFileObj);
        let params = {
          ...toRaw(formState),
        };
          sysUpgradeApi.sysUpgradeSave(params).then((res) => {
              if (res && res.success) {
                message.success("操作成功");
                resetForm();
                emit("finish");
              } else {
              }
            });
       
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      if (props.handleType == "add") {
        formState.id = "";
        return false;
      }
      formState.name = props.handleRow.name;
      formState.num = props.handleRow.num;
      formState.id = props.handleRow.id;
      formState.remark = props.handleRow.remark;
      formState.url = props.handleRow.url;
      fileList.value = [{ url: props.handleRow.url,status: 'done',name: props.handleRow.url,}];
    });

    return {
      formRef,
      handleType,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      fileList,
      beforeUpload,
      resetForm,
    };
  },
});
</script>
<style lang="scss">
</style>